<!-- 
  Calendar 日历组件                   zls-2023/07/28
    所有属性、事件、方法、插槽，请参考   https://vant-contrib.gitee.io/vant/#/zh-CN/calendar

  Demo
    <Form ref="formRef">
      <z-calendar v-model="form.calendar1" label="日历单选" type="single"></z-calendar>
      <z-calendar v-model="form.calendar2" label="日历范围" type="range" required></z-calendar>
      <z-calendar v-model="form.calendar3" label="日历多选" type="multiple"></z-calendar>
    </Form>

    const form = reactive({
      calendar1: '2022-05-25',
      calendar2: '2022-05-26,2022-09-10',
      calendar3: '2022-05-26,2022-05-28',
    })
 -->
<template>
  <z-input
    v-bind="{ ...attrsFieldDefault, ...$attrs, type: 'text', modelValue: inputVal }"
    :rules="$attrs['required'] || $attrs['required'] === '' ? [{ required: true, message: '请选择' }] : []"
    @click="show = true"
  >
    <template #right-icon>
      <z-svg name="chahao" v-if="inputVal" @click.stop="clear"></z-svg>
    </template>
  </z-input>
  <Calendar v-model:show="show" v-bind="{ ...attrsCalendarDefault, ...$attrs }" @confirm="confirm" />
</template>

<script>
export default { name: 'z-calendar' }
</script>
<script setup>
import { ref, useAttrs, watch } from 'vue'
import { Calendar } from 'vant'
import $day from 'dayjs'
const emit = defineEmits(['update:modelValue', 'clear', 'confirm'])
const attrs = useAttrs()

const show = ref(false) // 是否显示弹框
const inputVal = ref('') // 输入框的值
const minDate = ref(new Date($day().subtract(10, 'year'))) // 最大时间为10年前
const maxDate = ref(new Date($day().add(10, 'year'))) // 最大时间为10年后

// Field输入框默认属性
const attrsFieldDefault = {
  readonly: true,
  placeholder: '请选择',
  'is-link': true,
  maxlength: '2000'
}
// Popup弹框默认属性
const attrsCalendarDefault = {
  'min-date': minDate.value,
  'max-date': maxDate.value,
  'allow-same-day': true,
  'default-date': []
}

// 监听Field输入框值的变化
watch(
  () => attrs.modelValue,
  nweVal => {
    inputVal.value = attrs.modelValue
    setDefaultValue(inputVal.value)
  },
  { immediate: true }
)

// 设置默认日期(flag:控制初次设置默认值还是清空操作)
function setDefaultValue(str) {
  // 设置三种日期类型的默认值('single'、'multiple'、'range')
  const dateObj = {
    single: new Date(),
    multiple: [new Date()],
    range: [new Date(), new Date($day().add(1, 'day'))]
  }
  if (!inputVal.value) {
    attrsCalendarDefault['default-date'] = dateObj[attrs.type]
    return
  }
  if (attrs.type === 'single') {
    attrsCalendarDefault['default-date'] = new Date(attrs.modelValue)
  } else {
    attrs.modelValue.split(',').forEach(v => {
      attrsCalendarDefault['default-date'].push(new Date(v))
    })
  }
}

// 清空时间
function clear() {
  emit('update:modelValue', '')
  emit('clear', '')
}

// 选中某一项后，点击确认按钮 { value: 前选中的时间 }
function confirm(value) {
  show.value = false
  const time = attrs.type === 'single' ? $day(value).format('YYYY-MM-DD') : value.map(v => $day(v).format('YYYY-MM-DD')).join()
  emit('update:modelValue', time)
  emit('confirm', time)
}
</script>
